@extends('admin.layouts.app')
@section('content')

                        <!-- Page-Title -->
                       
                        
                        <div class="row">
                        	<div class="col-lg-12">
                        		<div class="card-box">
                            <h2 class="m-t-0 header-title">Add Car Information</h2>
                            <hr/>
                             
                              @include('admin.common.error')
                        			<div class="row">
			                        	<div class="col-md-6">
              <form class="form-horizontal" role="form" action="{{url('zadmin/cars')}}" method="post" enctype="multipart/form-data">

              <div class="form-group">
                <label class="col-md-2 control-label">Registration Number</label>
                <div class="col-md-10">
                  <input type="text" class="form-control" name="code" required="" value="" >
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label">Make/Model</label>
                <div class="col-md-10">
                  <input type="text" class="form-control" name="model" required="" value="" >
                </div>
              </div>
             
              <div class="form-group">
                <label class="col-md-2 control-label">Class</label>
                <div class="col-md-10">
                  <select type="text" class="form-control" name="car_type_id" required="" >
                    <option value="">select...</option>
                    @foreach($types as $t)
                    <option value="{{$t->id}}">{{$t->name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>
              <div class="form-group">
                <label class="col-md-2 control-label">Status</label>
                <div class="col-md-10">
                   <select type="text" class="form-control" name="status" required="" >
                    <option value="">select...</option>
                    @foreach($status as $s)
                    <option value="{{$s->name}}">{{$s->name}}</option>
                    @endforeach
                  </select>
                </div>
              </div>

              <div class="form-group">
                <label class="col-md-2 control-label">Location</label>
                <div class="col-md-10">
                  <input type="text" class="form-control" name="lnglat" required="" value="" placeholder="Select from the map" >
                </div>
              </div>
              

             

              

          
                                              

                                              

                                              <div class="form-group text-center">
                                                  
                                                  <button type="submit" class="btn btn-info waves-effect waves-light">保存</button>
                                              </div>
                                              
                                              
                             {{csrf_field()}}
                       
                </form>
                                </div>

                <div class="col-md-6">
                  <div id="map" style="height: 300px;"></div>
                </div>
			                        	
			                        </div>

                             
			                        
                        			
                        		</div>
                                
                            </div> <!-- end col -->

                            
                        </div>
@endsection
                        
                        
                        

                  
            
    @section('modal')        
     
    @endsection        
       

           



    
        @section('js')
<script>

      var map,markers = [];;
      function initMap() 
      {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -37.8134183, lng: 144.9612273},
          zoom: 8
        });

         map.addListener('click', function(e) {
         
          map.setZoom(8);
          var lnglat = e.latLng.lng()+','+e.latLng.lat();
          $('input[name="lnglat"]').val(lnglat);

          addMarker(e.latLng);
        });
      }

      function addMarker(lnglat)
      {
        clearMarkers();
        var marker = new google.maps.Marker({
          position: lnglat,
          map: map,
          //title: 'Hello World!'
        });

        markers.push(marker);
      }

      function setMapOnAll(map) {
        for (var i = 0; i < markers.length; i++) {
          markers[i].setMap(map);
        }
      }


      function clearMarkers()
      {
        setMapOnAll(null);
      }

      // Shows any markers currently in the array.
      function showMarkers()
      {
        setMapOnAll(map);
      }

      function deleteMarkers()
      {
        clearMarkers();
        markers = [];
      }
     
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyA2yzJvOCp4RePF7iXFXRDrseLDkwTmjX0&callback=initMap"
    async defer></script>

        
        @endsection
    
